<template>
    <div class="smenu">
        <div class="othermenu" @click="showsmenu">
        </div>
        <div class="menu">
            <div v-for="item,index in props.data" @click="item.clickevent">
                <p>{{item.title}}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    data: {
        type: [Array],
        default: [{
            title: '1',
            clickevent: () => { }
        },
        {
            title: '2',
            clickevent: () => { }
        },
        {
            title: '3',
            clickevent: () => { }
        },
        {
            title: '4',
            clickevent: () => { }
        },
        {
            title: '5',
            clickevent: () => { }
        }]
    },
})

//显示隐藏右上角菜单
let showsmenu = () => {
    let el = document.querySelector('.othermenu')
    if (el.classList.contains('menuactive'))
        el.classList.remove('menuactive')
    else
        el.classList.add('menuactive')
}

</script>

<style lang="scss" scoped>
.menuactive {
    transform: translate(0, 0) !important;
    &::after {
        transform: translate(-50%, -50%) !important;
    }
    & + .menu {
        @for $i from 1 through 5 {
            div:nth-child(#{$i}) {
                transform: rotate(19deg * ($i - 1) + 189deg)
                    translate(0px, -100px) !important;
                p {
                    transform: rotate(-19deg * ($i - 1) - 189deg);
                }
            }
        }
    }
}
.smenu {
    .menu {
        height: 150px;
        width: 150px;
        right: 0px;
        top: 0px;
        position: absolute;

        background-color: transparent;
        & > div {
            cursor: pointer;
            box-shadow: 0px 0px 9px 1px rgba(0, 89, 84, 0.7);
            background-color: var(--theme-color);
            display: flex;
            /* margin: auto; */
            justify-content: center;
            align-items: center;
            right: 0px;
            transform: translate(50%, -50%);
            height: 30px;
            width: 30px;
            position: absolute;
            border-radius: 50%;
            //transform: translate(100%, -50%);
            font-size: 12px;
            color: #fff;
            transition: transform 0.7s cubic-bezier(0.63, -0.4, 0.67, 1.78);
        }
    }
    .othermenu {
        box-shadow: 0px 0px 9px 1px rgba(0, 89, 84, 0.7);
        cursor: pointer;
        background-color: var(--theme-color);
        height: 80px;
        width: 80px;
        position: absolute;
        z-index: 13;
        border-radius: 50%;
        overflow: hidden;
        right: 0px;
        top: 0px;
        transform: translate(50%, -50%);
        transition: transform 0.3s cubic-bezier(0.63, -0.4, 0.67, 1.78);

        &::after {
            position: absolute;
            content: "Menu";
            font-size: 12px;
            color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-100%, 10%);
        }
    }
}
</style>